import React, { useState, useEffect } from 'react'
import style from './index.module.css'
import { DatePicker, Space, ConfigProvider, Select, Button } from 'antd';
import locale from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import { getdingdan } from '../../request/index'

function Index() {
  const [list, setList] = useState([]);
  const [selectedStatus, setSelectedStatus] = useState('全部');
  const [filteredList, setFilteredList] = useState([]);
  const [search, setSearch] = useState('');

  // 搜索
  const Search = () => {
    const filteredBySearch = list.filter(item =>
      item.bianhao.toString().includes(search) // 根据订单编号过滤
    );

    // 根据状态进一步过滤
    const finalFilteredList = filteredBySearch.filter(item => {
      if (selectedStatus === '全部') return true; // 如果选择的是全部状态
      return item.type === selectedStatus; // 根据选中的状态过滤
    });

    setFilteredList(finalFilteredList); // 更新过滤后的列表
  };

  useEffect(() => {
    getdingdan().then((res) => {
      setList(res.data);
      setFilteredList(res.data); // 初始化时设置过滤列表
    });
  }, []);

  // 国际化
  const { RangePicker } = DatePicker;

  // Tabs切换
  const tabs = [
    {
      label: '全部', content: (
        <div>
          {/* 标题 */}
          <div className={style.zhu}>
            <div className={style.dingDan}>  订单信息</div>
            <div className={style.maiJia}>卖家</div>
            <div className={style.shouHuo}>收货信息</div>
            <div className={style.caoZuo}>操作</div>
          </div>
          {
            filteredList.map((item, index) => (
              <div className={style.zhuTi} key={index}>
                {/* 头部 */}
                <div className={style.zhu} style={{ margin: "0", textAlign: "left", background: "#f7f9fc" }}>
                  <div className={style.dingDan} style={{ marginRight: "20%" }}>  订单号:E{item.bianhao} <span style={{ marginLeft: '20%' }}>业务员:{item.name}</span></div>
                  <div className={style.shouHuo} style={{ textAlign: "right" }}>共1件商品  合计: ￥{item.price}.00（含运费：￥0.00）</div>
                </div>
                {/* 主体 */}
                <div className={style.zhu} style={{ margin: "0", textAlign: "left", background: "#fff" }}>
                  <div className={style.dingDan}>
                    <img src={item.img} alt="" />
                    <div style={{ position: "relative" }}>
                      <p style={{ marginTop: "20px", width: "80%", lineHeight: '30px' }}>{item.desc}</p>
                      <div style={{ position: "absolute", top: "30px", right: "10px" }}>
                        <p>￥{item.price}.00</p>
                        <p>   X1</p>
                      </div>
                      <p style={{ color: "red", marginTop: "0px" }}>{item.type}</p>
                    </div>
                  </div>
                  <div className={style.maiJia} style={{ textAlign: "center", border: "1px solid #ccc", borderBottom: "none", borderTop: "none", height: "150px" }}>{item.title}</div>
                  <div className={style.shouHuo}>
                    <div style={{ margin: "20px" }}>
                      <p>{item.name}  {item.phone}</p>
                      <p>{item.city}</p>
                    </div>
                  </div>
                  <div className={style.caoZuo} style={{ textAlign: "center", borderLeft: "1px solid #ccc", height: "150px" }}>
                    <a href="">订单详情</a>
                  </div>
                </div>
              </div>
            ))
          }
        </div>
      )
    },
    { label: '代付款', content: 'This is content for 代付款' },
    { label: '待发货', content: 'This is content for 全部' },
    { label: '代收款', content: 'This is content for 全部' },
    { label: '已完成', content: 'This is content for 全部' },
    { label: '已关闭', content: 'This is content for 全部' },
  ];

  const [activeTab, setActiveTab] = useState(tabs[0].label);

  return (
    <div className={style.box}>
      <div className={style.Top}>
        <h2>订单管理</h2>
        <div style={{ display: "flex" }}>
          <p><span className={style.s1}>订单编号:</span>
            <input type="text" placeholder='请输入订单编号' className={style.inp} value={search} onChange={(e) => setSearch(e.target.value)} />
          </p>
          <ConfigProvider locale={locale}>
            <div style={{ display: "flex" }}> <span className={style.s1}>下单时间:</span> <Space direction="vertical" size={12}> <RangePicker /></Space></div>
          </ConfigProvider>
          <div>
            <span className={style.s1}>订单状态:</span>
            <Space wrap>
              <Select
                defaultValue="全部"
                style={{ width: 220, marginTop: -10 }}
                onChange={(value) => setSelectedStatus(value)} // Update the selected status
                options={[
                  { value: '全部', label: '全部' },
                  { value: '代付款', label: '代付款' },
                  { value: '待发货', label: '待发货' },
                  { value: '待收货', label: '待收货' },
                  { value: '已完成', label: '已完成' },
                  { value: '已关闭', label: '已关闭' },
                ]}
              />
            </Space>
          </div>
          <div>
            <span className={style.s1}>退款状态:</span>
            <Space wrap>
              <Select
                defaultValue="暂不选择"
                style={{ width: 220, marginTop: -10 }}
                options={[
                  { value: '待退款', label: '待退款' },
                  { value: '已退款', label: '已退款' },
                ]}
              />
            </Space>
          </div>
        </div>
        <Button type="primary" onClick={Search}>筛选订单</Button>
        <Button onClick={() => { setSearch(''); setSelectedStatus('全部'); setFilteredList(list); }}>清空筛选条件</Button>
        <Button>批量导出</Button>
      </div>
      <div className={style.Bottom}>
        <div style={{ display: 'flex', cursor: 'pointer' }}>
          {tabs.map((tab) => (
            <div
              key={tab.label}
              onClick={() => setActiveTab(tab.label)}
              style={{
                padding: '10px ',
                borderBottom: activeTab === tab.label ? '2px solid blue' : 'none',
                marginRight: '10px',
              }}
            >
              {tab.label}
            </div>
          ))}
        </div>

        {/* 渲染对应的内容 */}
        <div style={{ marginTop: '10px' }}>
          {tabs.map(
            (tab) =>
              activeTab === tab.label && <div key={tab.label}>{tab.content}</div>
          )}
        </div>
      </div>
    </div>
  )
}

export default Index;
